<template>
  <div class="post-detail-container">
    <!-- 返回按钮 -->
    <el-button type="primary" icon="el-icon-arrow-left" @click="goBack" style="margin-bottom: 15px;">
      返回
    </el-button>

    <!-- 加载中 -->
    <el-skeleton :loading="isLoading" animated>
      <template #template>
        <el-card>
          <h3>加载中...</h3>
        </el-card>
      </template>

      <template #default>
        <!-- 错误提示 -->
        <el-alert
            v-if="error"
            :title="error"
            type="error"
            show-icon
            center
            style="margin-bottom: 20px;"
        />

        <!-- 帖子详情 -->
        <el-card v-if="post">
          <div class="post-detail-header">
            <h3>{{ post.title }}</h3>
          </div>
          <div class="post-detail-content">
            <p>{{ post.description }}</p>
            <p><strong>主题:</strong> {{ post.subject }}</p>
            <p><strong>时间:</strong> {{ post.preferredTime }}</p>
            <p><strong>联系方式:</strong> {{ post.contactMethod }}</p>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'

const route = useRoute()
const router = useRouter()
const postId = route.params.id

const post = ref(null)
const isLoading = ref(true)
const error = ref(null)

const fetchPostDetail = async () => {
  try {
    const response = await axios.get(`/partners/${postId}`)
    post.value = response.data
  } catch (err) {
    error.value = '获取帖子详情失败，请稍后重试。'
    console.error('获取帖子详情失败:', err)
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  // postId 检查
  if (!postId) {
    error.value = '无效的帖子ID'
    isLoading.value = false
  } else {
    fetchPostDetail()
  }
})

const goBack = () => {
  router.back()
}
</script>
